<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <!--  公告列表数据  -->
    <div class="data_div">
      <el-row :gutter="24">
        <el-col :span="24" v-for="item in shopData" :key="item.id">
          <el-card shadow="hover" style="margin-bottom: 20px;" @click.native="goDetails(item.id)">
            <div class="text item">
              {{ item.name }}
            </div>
            <div style="margin-top: 10px;font-size: 14px;font-weight: 100">
              {{ item.abstractStr }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-pagination
        align="center"
        small
        layout="prev, pager, next"
        v-show="total>0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="getCardList"
      />
    </div>
    <PcFooter/>
    <PcUp/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import variables from '@/assets/styles/variables.scss'
import headTop from '../../components/myComponents/components/top/index'
import PcHeader from '../../components/myComponents/components/header/index'
import PcCarousel from '../../components/myComponents/components/carousel/index'
import PcCard from '../../components/myComponents/components/pc_card/index'
import PcFooter from '../../components/myComponents/components/pc_footer/index'
import PcUp from '@/components/myComponents/components/pc_up/index'
import {listGongGao} from "@/api/pc";

export default {
  name: 'dataList2',
  components: {
    headTop,
    PcHeader,
    PcCarousel,
    PcCard,
    PcFooter,
    PcUp
  },
  created() {
    this.getCardList()
  },
  data() {
    return {
      shopData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 8
      }
    }
  },
  methods: {
    getCardList() {
      let shopData = [];
      for (let i = this.queryParams.pageNum; i < this.queryParams.pageNum + 8; i++) {
        shopData.push({
          id: 'hanP' + i,
          name: 'JAVA_' + i,
          abstractStr: 'abstractStrabstractStrabstractStr'
        })
      }
      this.shopData = shopData
      this.total = 21;
    },
    goDetails(id) {
      this.$router.push({path: '/pc/gonggao/details', query: {id: id}})
    },
    changeRadio1() {
      this.$modal.msgSuccess('点击了:' + this.radio1 + '_' + this.radio2)
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }
}
</script>

<style scoped>
.data_type_div {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 355px;
  width: 1210px;
}

.data_div {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0px 355px;
  width: 1210px;
  height: 100%;
  padding: 16px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.tags-container {
  border: solid #EEEEEE 1px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 355px;
  width: 1210px;
}

.tags-line {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: solid #EEEEEE 1px;
}

.tags-line:last-child {
  border-bottom: 0;
}

.tags-title {
  width: 5%;
  height: 24px;
  line-height: 24px;
  float: left;
  color: #999;
  font-size: 14px;
}

.el-radio-button >>> .el-radio-button__inner {
  border: solid #eee 0px !important;
  border-radius: 50px !important;
  padding: 7px;
}
</style>
